@import '@material/textfield/mixins.import';

@import 'form-field-sizing';
@import 'form-field-subscript';
@import 'form-field-focus-overlay';
@import 'mdc-text-field-textarea-overrides';
@import 'mdc-text-field-structure-overrides';

// Base styles for MDC text-field, notched-outline, floating label and line-ripple.
@include mdc-text-field-without-ripple($query: $mat-base-styles-without-animation-query);
@include mdc-floating-label-core-styles($query: $mat-base-styles-without-animation-query);
@include mdc-notched-outline-core-styles($query: $mat-base-styles-without-animation-query);
@include mdc-line-ripple-core-styles($query: $mat-base-styles-without-animation-query);

// MDC text-field overwrites.
@include _mat-mdc-text-field-textarea-overrides();
@include _mat-mdc-text-field-structure-overrides();

// Include the subscript and focus-overlay styles.
@include _mat-form-field-subscript();
@include _mat-form-field-focus-overlay();

// Host element of the form-field. It contains the mdc-text-field wrapper
// and the subscript wrapper.
.mat-mdc-form-field {
  display: inline-flex;
  // this container contains the text-field and the subscript. The subscript
  // should be displayed below the text-field. Hence the column direction.
  flex-direction: column;
}

// Container that contains the prefixes, infix and suffixes. These elements should
// be aligned vertically in the baseline and in a single row.
.mat-mdc-form-field-flex {
  display: inline-flex;
  align-items: baseline;
  box-sizing: border-box;
  width: 100%;
}

// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
// This allows developers to control the width without needing custom CSS overrides.
.mat-mdc-text-field-wrapper {
  width: 100%;
}

// Infix that contains the projected content (usually an input or a textarea). We ensure
// that the projected form-field control and content can stretch as needed, but we also
// apply a default infix width to make the form-field's look natural.
.mat-mdc-form-field-infix {
  flex: auto;
  min-width: 0;
  width: $mat-form-field-default-infix-width;
  // Needed so that the floating label does not overlap with prefixes or suffixes.
  position: relative;

  // We add a minimum height in order to ensure that custom controls have the same
  // default vertical space as text-field inputs (with respect to the vertical padding).
  min-height: $mdc-text-field-height;
  box-sizing: border-box;
}

// In order to make it possible for developers to disable animations for form-fields,
// we only activate the animation styles if animations are not explicitly disabled.
.mat-mdc-form-field:not(.mat-form-field-no-animations) {
  @include mdc-text-field-without-ripple($query: animation);
  @include mdc-floating-label-core-styles($query: animation);
  @include mdc-notched-outline-core-styles($query: animation);
  @include mdc-line-ripple-core-styles($query: animation);
}
